<template>
  <div class="container">
    <Navbar />
    
    <h1 class="page-title"><font-awesome-icon :icon="['fas', 'car']" /> 赛车图鉴</h1>
    
    <!-- 筛选器 -->
    <div class="filters">
      <div class="filter-group">
        <label>类型</label>
        <select v-model="filters.type">
          <option value="">全部</option>
          <option value="A车">A车</option>
          <option value="B车">B车</option>
          <option value="S车">S车</option>
        </select>
      </div>
      <div class="filter-group">
        <label>等级</label>
        <select v-model="filters.level">
          <option value="">全部</option>
          <option value="S级">S级</option>
          <option value="A级">A级</option>
          <option value="B级">B级</option>
          <option value="C级">C级</option>
        </select>
      </div>
      <div class="filter-group">
        <label>平跑极速</label>
        <div class="range-input">
          <input type="number" placeholder="最小值" v-model="filters.speedMin">
          <input type="number" placeholder="最大值" v-model="filters.speedMax">
        </div>
      </div>
      <div class="filter-group">
        <label>氮气极速</label>
        <div class="range-input">
          <input type="number" placeholder="最小值" v-model="filters.nitroMin">
          <input type="number" placeholder="最大值" v-model="filters.nitroMax">
        </div>
      </div>
      <div class="filter-group">
        <label>飘逸速率</label>
        <div class="range-input">
          <input type="number" placeholder="最小值" v-model="filters.driftMin">
          <input type="number" placeholder="最大值" v-model="filters.driftMax">
        </div>
      </div>
      <div class="filter-actions">
        <button class="reset-btn" @click="resetFilters">重置</button>
        <button class="apply-btn" @click="applyFilters">应用筛选</button>
      </div>
    </div>
    
    <!-- 列表视图 -->
    <div class="list-view">
      <div class="list-header">
        <div class="view-options">
          <button :class="{ active: viewMode === 'grid' }" @click="viewMode = 'grid'">
            <font-awesome-icon :icon="['fas', 'th']" />
          </button>
          <button :class="{ active: viewMode === 'list' }" @click="viewMode = 'list'">
            <font-awesome-icon :icon="['fas', 'list']" />
          </button>
        </div>
        <div class="sort-options">
          <span>排序:</span>
          <select v-model="sortBy">
            <option value="popularity">热门程度</option>
            <option value="rating">评分高低</option>
            <option value="speed">平跑极速</option>
            <option value="nitro">氮气极速</option>
          </select>
        </div>
      </div>
      
      <div :class="viewMode === 'grid' ? 'card-grid' : 'card-list'">
        <div v-for="(car, index) in carList" :key="index" class="card" @click="$router.push(`/car-detail/${index}`)">
          <div class="card-img" :style="{ backgroundColor: car.bgColor }">
            <div class="card-badge">{{ car.level }}</div>
          </div>
          <div class="card-content">
            <div class="card-title">{{ car.name }}</div>
            <div class="card-meta">
              <div class="card-type">{{ car.type }}</div>
              <div class="card-rating">
                <font-awesome-icon :icon="['fas', 'star']" />
                <span>{{ car.rating }} ({{ car.ratingCount }})</span>
              </div>
            </div>
            <div v-if="viewMode === 'list'" class="card-details">
              <div class="detail-item">
                <span class="detail-label">平跑极速:</span>
                <span class="detail-value">{{ car.speed }} km/h</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">氮气极速:</span>
                <span class="detail-value">{{ car.nitro }} km/h</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">飘逸速率:</span>
                <span class="detail-value">{{ car.drift }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="pagination">
        <button><font-awesome-icon :icon="['fas', 'angle-left']" /></button>
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <button>...</button>
        <button>10</button>
        <button><font-awesome-icon :icon="['fas', 'angle-right']" /></button>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 赛车列表页组件
 * @component CarList
 */
import { ref, reactive } from 'vue'
import Navbar from '../../components/Navbar.vue'

// 视图模式（网格/列表）
const viewMode = ref('grid')
// 排序方式
const sortBy = ref('popularity')

// 筛选条件
const filters = reactive({
  type: '',
  level: '',
  speedMin: '',
  speedMax: '',
  nitroMin: '',
  nitroMax: '',
  driftMin: '',
  driftMax: ''
})

// 重置筛选
const resetFilters = () => {
  Object.keys(filters).forEach(key => {
    filters[key] = ''
  })
}

// 应用筛选
const applyFilters = () => {
  // 这里可以添加筛选逻辑，根据filters对carList进行过滤
  console.log('应用筛选：', filters)
}

// 赛车列表数据
const carList = ref([
  { 
    name: '雷诺特技车', 
    type: 'A车', 
    level: 'S级', 
    rating: '4.9', 
    ratingCount: '120', 
    bgColor: '#3a8bff',
    speed: 86.5,
    nitro: 104.5,
    drift: 92
  },
  { 
    name: '流星', 
    type: 'B车', 
    level: 'A级', 
    rating: '4.7', 
    ratingCount: '98', 
    bgColor: '#ff6b6b',
    speed: 82.5,
    nitro: 98.5,
    drift: 88
  },
  { 
    name: '剃刀', 
    type: 'A车', 
    level: 'A级', 
    rating: '4.6', 
    ratingCount: '87', 
    bgColor: '#20c997',
    speed: 84.0,
    nitro: 100.0,
    drift: 90
  },
  { 
    name: '魔鲨', 
    type: 'B车', 
    level: 'B级', 
    rating: '4.5', 
    ratingCount: '76', 
    bgColor: '#6f42c1',
    speed: 80.0,
    nitro: 96.0,
    drift: 85
  },
  { 
    name: '银色幻影', 
    type: 'S车', 
    level: 'S级', 
    rating: '4.8', 
    ratingCount: '110', 
    bgColor: '#fd7e14',
    speed: 88.0,
    nitro: 106.0,
    drift: 94
  },
  { 
    name: '烈焰风暴', 
    type: 'A车', 
    level: 'A级', 
    rating: '4.7', 
    ratingCount: '93', 
    bgColor: '#0dcaf0',
    speed: 85.0,
    nitro: 102.0,
    drift: 91
  },
  { 
    name: '红莲爆裂', 
    type: 'B车', 
    level: 'B级', 
    rating: '4.4', 
    ratingCount: '68', 
    bgColor: '#dc3545',
    speed: 79.0,
    nitro: 95.0,
    drift: 84
  },
  { 
    name: '幽灵战车', 
    type: 'C车', 
    level: 'C级', 
    rating: '4.2', 
    ratingCount: '45', 
    bgColor: '#6c757d',
    speed: 75.0,
    nitro: 90.0,
    drift: 78
  }
])
</script>

<style scoped>
.page-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #0078ff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
}

.filter-group {
  display: flex;
  flex-direction: column;
}

.filter-group label {
  font-size: 14px;
  margin-bottom: 5px;
  color: #555;
}

.filter-group select, .filter-group input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.range-input {
  display: flex;
  gap: 5px;
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  grid-column: 1 / -1;
}

.filter-actions button {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.apply-btn {
  background: #0078ff;
  color: white;
}

.reset-btn {
  background: #eee;
  color: #333;
}

.list-view {
  margin-top: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.view-options {
  display: flex;
  gap: 10px;
}

.view-options button {
  background: #f5f5f5;
  border: none;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
}

.view-options button.active {
  background: #0078ff;
  color: white;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-options select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-list .card {
  display: flex;
  align-items: center;
}

.card-list .card-img {
  width: 120px;
  min-width: 120px;
  height: 120px;
}

.card-list .card-content {
  flex: 1;
}

.card-details {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.detail-item {
  font-size: 14px;
  color: #666;
}

.detail-value {
  font-weight: bold;
  margin-left: 5px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 10px;
}

.pagination button {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.pagination button.active {
  background: #0078ff;
  color: white;
  border: none;
}
</style> 